<template>
	<div class="scroll">
		<scroll :on-refresh='refresh' :on-infinite='infinite'>
			<ul>
				<li v-for="item in list" :key='item.id'>{{item}}</li>
			</ul>
		</scroll>
	</div>
</template>
<script>
	import scroll from './scroll.vue';
	export default {
		data() {
			return {
				list:[],
				isLoading:false,
				offset:100
			}
		},
		mounted(){
			let that = this;
			for (var i = 0; i < 20; i++) {
				that.list.push('数据'+i)
			}
		},
		components:{
			scroll
		},
		methods:{
			refresh(done){
				let that = this;
				// 将加载的最新信息添加都list前面
				setTimeout(function(){
					for (var i = 300; i < 302; i++) {
						that.list.unshift('数据'+i)
					}
					done();
				},1000);
			},
			infinite(done){
				let that = this;
				// 在没有加载的情况下才触发加载更多
				if(!that.isLoading){
					that.isLoading = true;
					setTimeout(function(){
						for (var i = 200; i < 205; i++) {
							that.list.push('数据'+i)
						}
						that.isLoading = false;
						done();
					},1000);
				}
			}
		},
	}
</script>
<style>
	li{
		height: 40px;
		line-height: 40px;
	}
</style>